<template>
    <div>
        <div class="i-h">
            <div class="i-h-1">
                <img src="../assets/img/top.jpg" height="60">
            </div>
            <div class="i-h-2">
                <div  v-for="item in data" :key="item.id" class="h-a m-l-20" style="height: 100%;line-height: 40px;">
                  <div class="i-r-bc">
                      <router-link :to="'/cs/'+item.id">
                          <div>
                              {{item.name}}
                          </div>
                      </router-link>
                  </div>
                </div>
            </div>

        </div>

    </div>

</template>

<script>
    export default {
        data() {
       return{
           data:[
               {    id:1,
                   name:'主页'
               },
               {     id:2,
                   name:'项目管理'
               },
               {     id:3,
                   name:'专家应用'
               },
               {     id:4,
                   name:'帮助咨询'
               },
               {     id:5,
                   name:'个人中心'
               },

           ]
       }
        },
        created() {
            console.log(this.data)
        }

    }
</script>

<style>
 .i-h{
     height: 100px;
 }
 .i-h-1{
     height: 60px;
 }
 .i-h-2{
     height: 40px;
     background-color: #4393f4;
 }
 .i-r-bc{
     width: 100px;
     height: 40px;
     text-align: center;
     font-size: 1.4em;
 }
 .i-r-bc:hover{
     background-color: #155fb8;
 }
</style>
